<template>
  <div>
    <div class="search-box">
      <transition name="el-zoom-in-top">
        <el-form :inline="true"   class="search-form" size="medium" label-width="100px">
          <el-form-item label="分类：">
            <el-select placeholder="请选择分类" v-model="apkParam.apkKey" clearable>
              <el-option label="全部分类" value=""></el-option>
              <el-option label="Android" value="anpxdAndroidErpApp"></el-option>
              <el-option label="IOS" value="anpxdIOSErpApp"></el-option>
            </el-select>
            <el-button style="margin-left: 10px" type="primary" icon="el-icon-search" @click="searchCarList">查询</el-button>
          </el-form-item>
        </el-form>
      </transition>
    </div>
    <el-table :data="versionList" border width="100%" v-loading="loading">
      <el-table-column label="Apk名称" align="center" width="160">
        <template slot-scope="scope">
          <p>{{scope.row.apkName}}</p>
        </template>
      </el-table-column>
      <el-table-column label="Apk版本号" align="center" width="140">
        <template slot-scope="scope">
          <p>{{scope.row.apkVersion}}</p>
        </template>
      </el-table-column>
      <el-table-column label="Apk热更新版本号" align="center" width="150">
        <template slot-scope="scope">
          <p>{{scope.row.apkHotVersion}}</p>
        </template>
      </el-table-column>
      <el-table-column label="Apk是否强制更新" align="center" width="150">
        <template slot-scope="scope">
          <p>{{scope.row.apkForce | filterIsOrNo}}</p>
        </template>
      </el-table-column>
      <el-table-column label="Apk下载地址" align="center">
        <template slot-scope="scope">
          <p>{{scope.row.apkUrl}}</p>
        </template>
      </el-table-column>
      <el-table-column label="Apk状态" width="100" prop="carImageUrl" align="center">
        <template slot-scope="scope">
          <p>{{scope.row.apkState | filterRotationState}}</p>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="carImageUrl" align="center">
        <template slot-scope="scope">
          <p>{{scope.row.apkRemark}}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click.native="editVersion(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="apkParam.pageIndex"
        :page-size="apkParam.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import '../../assets/css/car.css'
  export default {
    name: "versionList",
    data(){
      return {
        apkParam:{
          apkKey:"",
          pageSize:10,
          pageIndex:1
        },
        versionList:[],
        totalPage:0,
        loading:false
      }
    },
    computed:{
      router(){
        return this.$route.query;
      }
    },
    watch:{
      'router'(){
        this.getVersionList();
        this.getVersionNumber()
      }
    },
    created(){
      this.getVersionList();
      this.getVersionNumber()
    },
    methods:{
      getVersionList(){
        this.loading = true;
        axios.get(this.$api.getApkList,{params:this.apkParam})
          .then(res=>{
            this.loading = false;
            this.versionList = res.data.result;
          })
      },
      getVersionNumber(){
        axios.get(this.$api.getApkNum,{params:{apkKey:this.apkParam.apkKey}})
          .then(res=>{
            this.totalPage = res.data.result.total;
          })
      },
      editVersion(item){
        this.$router.push('/version/versionForm?apkKey='+item.apkKey+'&apkVersion='+item.apkVersion);
      },
      searchCarList(){
        this.apkParam.pageIndex = 1;
        this.getVersionList();
        this.getVersionNumber();
      },
      handleSizeChange(pageSize){
        this.apkParam.pageIndex = 1;
        this.apkParam.pageSize = pageSize;
        this.getVersionList();
      },
      handleCurrentChange(pageIndex){
        this.apkParam.pageIndex = pageIndex;
        this.getVersionList();
      }
    }
  }
</script>

<style scoped>

</style>
